<template>
    <div class="title_box">
        <div class="title">{{ left_text }}</div>
        <div class="title_right" @click="clickFn">
            {{ right_text }}<van-icon :name="right_name" v-show="right_show" />
        </div>
    </div>
</template>

<script>
export default {
    name: "HomeTitle",
    props: {
        left_text: { type: String, default: '' },
        right_text: { type: String, default: '' },
        right_show: { type: Boolean, default: true },
        right_name: { type: String, default: 'arrow' },
    },
    methods: {
        clickFn() {
            this.$emit('clickFn');
        }

    },
}
</script>

<style lang="less" scoped>
// 小标题
.title_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 26px;
    padding: 0 15px;
    color: #fff;

    // 左边
    .title {
        font-size: 15px;
        letter-spacing: 1px;
        position: relative;

        &::before {
            content: '';
            width: 24px;
            height: 8px;
            background-image: linear-gradient(90deg, #00a2ff, #ee02ff);
            border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
            opacity: 0.4;
            position: absolute;
            bottom: -1px;
        }
        &::after {
            content: '';
            width: 30px;
            height: 30px;
            background-color: #fff;
            position: absolute;
            top: -12px;
            z-index: -1;
            right: -16px;
            background: url('../assets/sssss.png') no-repeat center center;
            background-size: 40px;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            transform: rotate(10deg);
        }
    }

    // 右边
    .title_right {
        display: flex;
        align-items: center;
        color: #fb9413;
        i {
            font-size: 18px;
            margin-left: 3px;
        }
    }
}
</style>